<include file="../header" />
<div class="wrapper">

    <div class="main">
        <div class="header text-center font-16">
            详情
            <if condition="$is_history eq 1"><div class="iconfont icon-zuo go_back"><else/><div class="iconfont icon-zuo go_index"></if></div>
        </div>
        <div class="padding-12 gray"><span class="iconfont icon-dingdanzhuangtai"></span>订单状态</div>
        <div class="box">
            <div class="circle-box">
                <div class="line"></div>
                <div class="course font-12 flex-between ">
                    <!-- 第一个状态点 -->
                    
                    <div class="details active">
                        <div class=" circle">
                            <div class="min-circle"></div>
                        </div>
                        <p>已下单</p>
                    </div>
                    
                    <!-- 第二个状态点 -->
                    <if condition="$data.status gt 2 or $data.status eq 0">
                        <div class="details active">
                            <div class=" circle">
                                <div class="min-circle"></div>
                            </div>
                            <p>已接单</p>
                        </div>
                    <else/>
                        <div class="details">
                            <div class=" circle">
                                <div class="min-circle"></div>
                            </div>
                            <p>待接单</p>
                        </div>
                    </if>
                    <!-- 第三个状态点 -->
                    <if condition="$data.status eq 4 and $data.hang_up eq 1">
                        <div class="details active">
                            <div class=" circle ">
                                <div class="min-circle"></div>
                            </div>
                            <p>已挂起</p>
                        </div>
                    <elseif condition="$data.status eq 5 or $data.status eq 6"/>
                    	<div class="details active">
	                        <div class=" circle ">
	                            <div class="min-circle"></div>
	                        </div>
	                        <p>已维修</p>
                    	</div>
                    </if>
                    <!--   四个进度的页面-->
                    <if condition="$data.status eq 5 and $data.status neq 6">
	                	<div class="details">
	                        <div class=" circle ">
	                            <div class="min-circle"></div>
	                        </div>
	                        <p>待评价</p>
	                    </div>
                    <elseif condition="$data.status eq 6"/>
                    	<div class="details active">
	                        <div class=" circle ">
	                            <div class="min-circle"></div>
	                        </div>
	                        <p>已评价</p>
                        </div>
                    <elseif condition="$data.status lt 5 and $data.status neq 0"/>
                        <div class="details">
                            <div class=" circle ">
                                <div class="min-circle"></div>
                            </div>
                            <p>待维修</p>
                        </div>
                    <elseif condition="$data.status eq 0"/>
                    	<div class="details active">
	                        <div class=" circle ">
	                            <div class="min-circle"></div>
	                        </div>
	                        <p>已取消</p>
                    	</div>
                    </if>
                </div>
            </div>
        </div>
        <div class="history-list">
            <div class="repair-list">
                <div class="width-82 font-12">报修地址：</div>
                <span>
                    {BEESCRM:$data.community_name}{BEESCRM:$data.building_name}{BEESCRM:$data.floor_name}{BEESCRM:$data.room_name}
                </span>
            </div>
            <div class="flex-between repair-list">
                <div>
                    <p>
                        <span class="width-82 font-12">报修项目：</span>
                        <if condition="$data.type eq 2">
                            <span>公共报修  {BEESCRM:$data.public_name}</span>
                        <else/>
                            <span>{BEESCRM:$data.project_name}/{BEESCRM:$data.project_child_name}</span>
                        </if>
                    </p>
                    <p class="margin-t4">
                        <span class="width-82 font-12">描述：</span>
                        <span>{BEESCRM:$data.content}</span>
                    </p>
                </div>
                <div class="images"  width="25%">
                    <img class="js_images" src="{BEESCRM:$data.image}" alt="" width="100%">
                </div>
            </div>
            <if condition="$data.hang_up eq 1">
                <if condition="$data.hang_reason">
                    <p >
                        <span class="width-82">挂单原因：</span><span class="font-16">{BEESCRM:$data.hang_reason}</span>
                    </p>
                </if>
                <p >
                    <span class="width-82">挂单描述：</span><span class="font-16">{BEESCRM:$data.hang_remark}</span>
                </p>
            </if>
            <if condition="$data.status eq 0">
                <if condition="$data.cancel_reason">
                    <p >
                        <span class="width-82">取消原因：</span><span class="font-16">{BEESCRM:$data.cancel_reason}</span>
                    </p>
                </if>
                <if condition="$data.cancel_remark">
                    <p >
                        <span class="width-82">取消描述：</span><span class="font-16">{BEESCRM:$data.cancel_remark}</span>
                    </p>
                </if>
            </if>
            <div class="repair-list">
                <if condition="$data.status egt 5">
                    <p class="margin-t4">
                        <span class="width-82 font-12">维修数量：</span>
                        <span>{BEESCRM:$data.goods_num}</span>
                    </p>
                </if>
                <p>
                    <span class="width-82 font-12">报修费用：</span>
                    <span class="money">
                        <span class="iconfont icon-qian01 font-12"></span>{BEESCRM:$data.order_amount}
                    </span>
                </p>
            </div>
            <!--<if condition="$data.status egt 5">
                <div class="flex-between repair-list">
                    <div>
                        <p class="margin-t4">
                            <span class="width-82 font-12">维修图片：</span>
                        </p>
                    </div>
                    <div class="images">
                        <img class="js_images" src="{BEESCRM:$data.finish_image}" alt="">
                    </div>
                </div>
            </if>-->
            <if condition="$repairmans">
                <div class="repair-list">
	                <volist name="repairmans" id="vo">
                        <div>
                            <p class="margin-t4">
                                <span class="width-82 font-12">维修工：</span>
                                <span class="font-8">{BEESCRM:$vo['real_name']}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;手机号：{BEESCRM:$vo['mobile']}</span>
                            </p>
                        </div>
	                </volist>
                </div>
            </if>
        </div>
        <if condition="$data.is_comment eq 1">
        <div class="history-list evaluate-box">
            <div class="evaluate">
                <span class="width-82">服务态度：</span>
                <for start="1" end="6" name="i">
                    <if condition="$data.service_star egt $i">
                        <span class="iconfont xingxing icon-xingxing"></span>&nbsp;&nbsp;
                        <else/>
                        <span class="iconfont icon-xingxing"></span>&nbsp;&nbsp;
                    </if>
                </for>
            </div>
            <div class="evaluate">
                <span class="width-82">维修质量：</span>
                <for start="1" end="6" name="i">
                    <if condition="$data.quality_star egt $i">
                        <span class="iconfont xingxing icon-xingxing"></span>&nbsp;&nbsp;
                        <else/>
                        <span class="iconfont icon-xingxing"></span>&nbsp;&nbsp;
                    </if>
                </for>
            </div>
            <div class="evaluate">
                <span class="width-82">响应速度：</span>
                <for start="1" end="6" name="i">
                    <if condition="$data.answer_star egt $i">
                        <span class="iconfont xingxing icon-xingxing"></span>&nbsp;&nbsp;
                        <else/>
                        <span class="iconfont icon-xingxing"></span>&nbsp;&nbsp;
                    </if>
                </for>
            </div>
            <div class="evaluate">
                <span class="width-82">描述：</span>
                <span class="font-16">{BEESCRM:$data.comment}</span>
            </div>
        </div>
        </if>
        <if condition="$data.type eq 3">
            <div class="history-list padding-12">
                <p class="text-center">将此二维码展示给维修人员</p>
                <div class="QR-code margin-t4">
                    <img src="/repaireast/repaireastRepair/qrcode/order_id/{BEESCRM:$data.order_id}" alt="">
                </div>
            </div>
        </if>
    </div>

    <if condition="$data.status eq 3">
        <a href="javascript:;" class="btn add text-center" id="cancel_order">取消订单</a>
    <elseif condition="$data.status eq 5 AND $data.is_comment eq 0" />
        <a href="/Repaireast/RepaireastRepair/comment/order_id/{BEESCRM:$data.order_id}" class="btn add text-center">评价订单</a>
    </if>
</div>
<div class="pop-box hide" id="pop-box">
    <div class="pop-hint">
        <div class="delete">
            <img src="/assets/repaireast/images/delete.png" alt="">
        </div>
        <div class="txt text-center">真的要取消订单？</div>
        <div class="text-center pop-btn flex">
            <a href="#" class="no">取消</a>
            <a href="#" class="yes btn-visit">确定</a>
        </div>
        <div class="iconfont icon-cheng1"></div>
    </div>

</div>
<div class="pop-box hide pop-tab" id="pop-img">
    <div class="table-cell">
        <div class="pop-images">
            <img class="js_pop-img" src="" alt="">
            <div class="pop-close iconfont  icon-cheng1">
            </div>
        </div>
    </div>
</div>
<input type="hidden" id="order_id" value="{BEESCRM:$data.order_id}">
<script src="/assets/repaireast/js/layer.js"></script>
<script src="/assets/repaireast/js/public.js"></script>
<script>
    $('#cancel_order').click(function () {
        $('#pop-box').removeClass('hide');
    });
    $('.icon-cheng1').click(function () {
        $('#pop-box').addClass('hide');
    });
    $('#pop-box .no').click(function () {
        $('#pop-box').addClass('hide');
    });
    $('#pop-box .yes').click(function () {
        $('#pop-box').addClass('hide');
        var address_id = $('#address_id').val();
        $.ajax({
            type:'post',
            url:"/Repaireast/RepaireastRepair/cancelOrder",
            dataType:'json',
            data:{
            	'user_id' : "{BEESCRM:$user_id}",
                'order_id' : $('#order_id').val()
            },
            success:function(data){
                fm.alert(data.message);
                setTimeout(function(){
                    location.reload();
                },2000);
            },
            error:function(){
                fm.alert('通讯失败，请稍后再试');
            }
        });
    });
    $('.js_images').click(function () {
        var src = $(this).attr('src');
        $('#pop-img').removeClass('hide');
        $('.js_pop-img').attr('src', src);
    })
    $('.pop-close').click(function () {
        $('#pop-img').addClass('hide');
    })

</script>
<include file="../footer" />